<template>
	<view class="step_f_row">
		<view class="title"> 设置分化模式 </view>
		<view class="from_row">
			<view class="from_item">
				<view class="label" style="margin-bottom: 20rpx;"> 分化（几次训练包含所有部位） </view>
				<view class="value">
					<view class="select_row_diff">
						<view :class="{
                select_item_diff: true,
                active: item.value == differentiation,
              }" @click="handleSelectDiff(item)" v-for="(item, index) in columns" :key="index">
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>
			<view class="from_item" v-if="differentiation > 0">
				<view class="label" style="margin-bottom: 20rpx;"> 使用推荐方案 </view>
				<view class="value">
					<view class="select_row">
						<view class="select_item" v-for="(item, index) in selectPart" :key="index">
							<view class="label">训练日{{ index + 1 }}</view>
							<view class="part_list">
								<view :class="{
                    part_item: true,
                    select_part_item: selectPart[index].includes(item2.value),
                  }" v-for="(item2, index2) in part" :key="index2" @click="handleSelectPart(index, item2.value)">
									{{ item2.text }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				differentiation: 0, // 分化
				selectPart: [], // 选择部位
				columns: [{
						text: "一分化",
						value: "1",
					},
					{
						text: "二分化",
						value: "2",
					},
					{
						text: "三分化",
						value: "3",
					},
					{
						text: "四分化",
						value: "4",
					},
					{
						text: "五分化",
						value: "5",
					},
					{
						text: "六分化",
						value: "6",
					},
				],
				part: [{
						text: "胸",
						value: "0"
					},
					{
						text: "背",
						value: "1"
					},
					{
						text: "肩",
						value: "2"
					},
					{
						text: "臂",
						value: "3"
					},
					{
						text: "腿",
						value: "4"
					},
					{
						text: "臀",
						value: "5"
					},
				],
			};
		},
		onLoad(option) {},
		methods: {
			// 点击选择分化
			handleSelectDiff(item) {
				// 如果选择的是当前已选择的分化，则不做任何操作
				if (this.differentiation === item.value) {
					return;
				}

				// 清空之前的选择
				this.selectPart = [];
				this.differentiation = item.value;

				// 根据分化数量创建对应数量的空数组
				for (let i = 0; i < parseInt(item.value); i++) {
					this.selectPart.push([]);
				}
				
				// 自动选择相应的部位
				this.autoSelectParts(parseInt(item.value));
			},
			
			// 自动选择部位
			autoSelectParts(differentiationValue) {
				switch(differentiationValue) {
					case 1: // 一分化：训练日1：全选
						this.selectPart[0] = ["0", "1", "2", "3", "4", "5"];
						break;
					case 2: // 二分化：训练日1：胸背肩臂，训练日2：腿+臀
						this.selectPart[0] = ["0", "1", "2", "3"];
						this.selectPart[1] = ["4", "5"];
						break;
					case 3: // 三分化：日1：胸肩，训练日2：背，臂；日3：腿臀
						this.selectPart[0] = ["0", "2"];
						this.selectPart[1] = ["1", "3"];
						this.selectPart[2] = ["4", "5"];
						break;
					case 4: // 四分化：1.胸 2.背 3.肩+臂 4.腿臀
						this.selectPart[0] = ["0"];
						this.selectPart[1] = ["1"];
						this.selectPart[2] = ["2", "3"];
						this.selectPart[3] = ["4", "5"];
						break;
					case 5: // 五分化：1.胸 2.背 3.肩 4.臂 5.腿臀
						this.selectPart[0] = ["0"];
						this.selectPart[1] = ["1"];
						this.selectPart[2] = ["2"];
						this.selectPart[3] = ["3"];
						this.selectPart[4] = ["4", "5"];
						break;
					case 6: // 六分化：一天一个
						this.selectPart[0] = ["0"];
						this.selectPart[1] = ["1"];
						this.selectPart[2] = ["2"];
						this.selectPart[3] = ["3"];
						this.selectPart[4] = ["4"];
						this.selectPart[5] = ["5"];
						break;
				}
				
				// 强制更新视图
				this.selectPart = [...this.selectPart];
				
				// 更新父组件的数据
				this.updateFormData();
			},

			// 点击选择部位
			handleSelectPart(dayIndex, value) {
				if (!this.selectPart[dayIndex]) {
					this.selectPart[dayIndex] = [];
				}

				// 检查部位是否已经被选择
				const index = this.selectPart[dayIndex].findIndex(item => item === value);

				// 如果已经选择了该部位，则删除
				if (index !== -1) {
					this.selectPart[dayIndex].splice(index, 1);
				} else {
					// 否则添加该部位
					this.selectPart[dayIndex].push(value);
				}

				// 强制更新视图
				this.selectPart = [...this.selectPart];

				// 更新父组件的数据
				this.updateFormData();
				console.log(this.selectPart)
			},

			// 获取表单数据
			getFormData() {
				return {
					differentiationModels: this.selectPart.map(subArray => subArray.join(','))
				};
			},
			// 更新父组件的数据
			updateFormData() {
				if (this.formData) {
					this.$emit('update:formData', {
						...this.formData,
						differentiation: this.differentiation,
						selectPart: [...this.selectPart]
					});
				}
			},

			// 验证表单
			validateForm() {
				// 如果选择了分化，则至少要选择一个部位
				if (this.differentiation > 0) {
					const hasSelectedParts = this.selectPart.some(day => day.length > 0)
					if (!hasSelectedParts) {
						uni.showToast({
							title: '请至少选择一个训练部位',
							icon: 'none'
						})
						return false
					}
				}
				
				return true
			},
		},
	};
</script>

<style lang="less">
	.step_f_row {
		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin: 60rpx 0;
			margin-top: 0;
			color: #000;
		}

		.from_row {
			.from_item {
				margin-bottom: 60rpx;

				.label {
					font-weight: 600;
					font-size: 28rpx;
				}

				.value {
					.select_row_diff {
						width: 100%;
						display: flex;
						// flex-wrap: wrap;
						justify-content: flex-start;

						.select_item_diff {
							width: 30%;
							border-radius: 8px;
							text-align: center;
							padding: 15rpx 0;
							color: #000;
							border: 2rpx solid rgba(124, 124, 126, 0.1);
							margin: 0 10rpx 20rpx;
						}

						.active {
							background-color: #6e58aa;
							color: #fff;
						}
					}

					.select_row {
						width: 100%;

						.select_item {
							display: flex;
							align-items: center;
							margin-bottom: 30rpx;

							.label {
								font-size: 28rpx;
								font-weight: 600;
								margin-right: 10rpx;
							}

							.part_list {
								display: flex;
								flex-wrap: wrap;
								gap: 20rpx;

								.part_item {
									width: 68rpx;
									height: 68rpx;
									border-radius: 10px;
									background: rgba(255, 255, 255);
									text-align: center;
									line-height: 68rpx;
									font-weight: 700;
									border: 2rpx solid rgba(124, 124, 126, 0.1);
									cursor: pointer;
								}

								.select_part_item {
									border: 2rpx solid rgba(110, 88, 170, 1);
									color: rgba(110, 88, 170, 1);
									background-color: rgba(110, 88, 170, 0.05);
								}
							}
						}
					}
				}
			}
		}
	}
</style>